<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { lStorage } from '@/utils/storage'
import { useTabsStore } from '@/store/modules/tabs'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()

const products = ref([
	{
		id: 'home.product.dom1.english',
		ids: 'MDTK',
		name: 'home.product.dom1.title',
		icon: 'M7.5,4A5.5,5.5 0 0,0 2,9.5C2,11.11 2.63,12.59 3.71,13.71L4,14H7V11H5.21L5.08,10.73C4.39,10.03 4,9.06 4,8A3.5,3.5 0 0,1 7.5,4.5A3.5,3.5 0 0,1 11,8C11,9.06 10.61,10.03 9.92,10.73L9.79,11H8V14H11L11.29,13.71C12.37,12.59 13,11.11 13,9.5A5.5,5.5 0 0,0 7.5,4M13,14C9.69,14 7,16.69 7,20H13M17.09,2.08L15.68,3.5L18.17,6H11.85L10.92,8.31L13.38,10.77L10.93,13.23L13.37,15.69L9.28,19.77L10.69,21.18L21.91,9.94L17.09,2.08Z',
		desc: 'home.product.dom1.content',
		path: '/Product/MDTK',
	},
	{
		id: 'home.product.dom2.english',
		ids: 'AI4Data',
		name: 'home.product.dom2.title',
		icon: 'M12,16A3,3 0 0,1 9,13C9,11.88 9.61,10.9 10.5,10.39L20.21,4.77L14.68,14.35C14.18,15.33 13.17,16 12,16M12,3C13.81,3 15.5,3.5 16.97,4.32L14.87,5.53C14,5.19 13,5 12,5A8,8 0 0,0 4,13C4,15.21 4.89,17.21 6.34,18.65H6.35C6.74,19.04 6.74,19.67 6.35,20.06C5.96,20.45 5.32,20.45 4.93,20.07V20.07C3.12,18.26 2,15.76 2,13A10,10 0 0,1 12,3M22,13C22,15.76 20.88,18.26 19.07,20.07V20.07C18.68,20.45 18.05,20.45 17.66,20.06C17.27,19.67 17.27,19.04 17.66,18.65V18.65C19.11,17.2 20,15.21 20,13C20,12 19.81,11 19.46,10.1L20.67,8C21.5,9.5 22,11.18 22,13Z',
		desc: 'home.product.dom2.content',
		path: '/Product',
	},
	{
		id: 'home.product.dom3.english',
		ids: 'Assistant',
		name: 'home.product.dom3.title',
		icon: 'M21,9V7C21,5.35 19.65,4 18,4H14.82C14.4,2.84 13.3,2 12,2C10.7,2 9.6,2.84 9.18,4H6C4.35,4 3,5.35 3,7V9C2.42,9 2,9.42 2,10V16C2,16.58 2.42,17 3,17V20C3,21.1 3.9,22 5,22H19C20.1,22 21,21.1 21,20V17C21.58,17 22,16.58 22,16V10C22,9.42 21.58,9 21,9M12,4C12.55,4 13,4.45 13,5C13,5.55 12.55,6 12,6C11.45,6 11,5.55 11,5C11,4.45 11.45,4 12,4M5,20V9H19V20H5M15.54,11.53L13.41,13.66L13.54,15.61L11.87,14.5L10.2,15.61L10.32,13.66L8.19,11.53L10.14,11.4L11,9.61L11.86,11.4L13.81,11.53L15.54,11.53Z',
		desc: 'home.product.dom3.content',
		path: '/Product',
	},
])

const router = useRouter()

const oneClick = (product) => {
	lStorage.set('isStartScrolling', true)
	lStorage.set('temporaryPath', product.ids)
	useTabsStore().setActiveTab(`/Product/${product.ids}`)
	setTimeout(() => {
		nextTick(() => {
			router.push(product.path)
		})
	}, 0)
}
</script>

<template>
	<div class="section-container">
		<div class="product-intro">
			<h2>{{ t('home.product.title') }}</h2>
			<p v-if="false">{{ t('home.product.content') }}</p>
		</div>

		<div class="product-grid">
			<div v-for="product in products" :key="product.id" class="product-card">
				<div class="card-header">
					<div class="icon-wrapper">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path :d="product.icon" />
						</svg>
					</div>
					<h3>{{ t(product.id) }}</h3>
					<p>{{ t(product.name) }}</p>
				</div>
				<div class="card-body">
					<p>{{ t(product.desc) }}</p>
				</div>
				<div class="card-footer">
					<a href="#" class="btn" @click="oneClick(product)">
						{{ t('home.product.btnText') }}
					</a>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
/*
 * ===========================================
 * 产品组件样式 - product.vue
 * ===========================================
 */

.section-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-4);
}

/* ===========================================
 * 产品介绍区域
 * =========================================== */

.product-intro {
	text-align: center;
	max-width: 900px;
	margin: 0 auto var(--space-16);
	padding: 0 var(--space-5);

	h2 {
		font-size: var(--font-size-4xl);
		font-weight: var(--font-weight-bold);
		color: var(--text-title);
		margin-bottom: var(--space-4);
		line-height: var(--line-height-tight);
	}

	p {
		color: var(--text-secondary);
		font-size: var(--font-size-lg);
		line-height: var(--line-height-relaxed);
		margin: 0;
	}
}

/* ===========================================
 * 产品网格布局
 * =========================================== */

.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--space-8);
	margin-top: var(--space-8);
}

/* ===========================================
 * 产品卡片样式
 * =========================================== */

.product-card {
	background: var(--card-bg);
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: var(--card-shadow);
	transition: all var(--transition-base);
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--card-border);
	backdrop-filter: var(--card-backdrop);
	position: relative;

	/* 顶部装饰条 */
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 4px;
		background: var(--brand-primary);
		z-index: var(--z-10);
	}

	&:hover {
		transform: var(--card-hover-transform);
		box-shadow: var(--card-hover-shadow);
		background: var(--card-hover-bg);
	}

	/* 卡片头部 */
	.card-header {
		padding: var(--space-8) var(--space-6) var(--space-4);
		text-align: center;
		position: relative;

		.icon-wrapper {
			width: 80px;
			height: 80px;
			margin: 0 auto var(--space-6);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: var(--radius-full);
			background: var(--brand-primary-50);
			transition: all var(--transition-base);

			svg {
				width: 40px;
				height: 40px;
				fill: var(--brand-primary);
				transition: fill var(--transition-base);
			}
		}

		h3 {
			margin: 0 0 var(--space-2) 0;
			font-size: var(--font-size-base);
			font-weight: var(--font-weight-semibold);
			color: var(--brand-primary);
		}

		p {
			margin: 0;
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-bold);
			color: var(--text-heading);
		}
	}

	/* 卡片内容 */
	.card-body {
		padding: 0 var(--space-6) var(--space-4);
		flex-grow: 1;

		p {
			margin: 0;
			font-size: var(--font-size-sm);
			color: var(--text-primary);
			line-height: var(--line-height-relaxed);
		}
	}

	/* 卡片底部 */
	.card-footer {
		padding: var(--space-5) var(--space-6) var(--space-6);
		background: var(--card-footer-bg);
		text-align: center;

		.btn {
			display: inline-block;
			background: var(--button-outline-bg);
			color: var(--button-outline-text);
			border: 2px solid var(--button-outline-border);
			padding: var(--space-3) var(--space-8);
			border-radius: var(--radius-full);
			font-weight: var(--font-weight-semibold);
			font-size: var(--font-size-sm);
			text-decoration: none;
			transition: all var(--transition-base);
			cursor: pointer;

			&:hover {
				background: var(--button-outline-hover-bg);
				color: var(--button-outline-hover-text);
				transform: translateY(-2px);
				box-shadow: var(--shadow-md);
			}
		}
	}

	/* 卡片悬停时图标效果 */
	&:hover .card-header .icon-wrapper {
		transform: scale(1.1);
		background: var(--brand-primary-100);

		svg {
			fill: var(--brand-primary-600);
		}
	}
}

/* ===========================================
 * 响应式设计
 * =========================================== */

@media (max-width: var(--breakpoint-md)) {
	.product-intro {
		margin-bottom: var(--space-12);
		padding: 0 var(--space-3);

		h2 {
			font-size: var(--font-size-3xl);
		}

		p {
			font-size: var(--font-size-base);
		}
	}

	.product-grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
		padding: 0 var(--space-2);
	}

	.product-card .card-header {
		padding: var(--space-6) var(--space-4) var(--space-3);

		.icon-wrapper {
			width: 60px;
			height: 60px;
			margin-bottom: var(--space-4);

			svg {
				width: 30px;
				height: 30px;
			}
		}

		h3 {
			font-size: var(--font-size-sm);
		}

		p {
			font-size: var(--font-size-lg);
		}
	}
}

@media (max-width: var(--breakpoint-sm)) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}

	.product-intro h2 {
		font-size: var(--font-size-2xl);
	}
}
</style>
